<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
import { createNamespacedHelpers, mapGetters } from "vuex";
const { mapMutations } = createNamespacedHelpers("view");
const { mapMutations: themeMapMutations } = createNamespacedHelpers("theme");
export default {
  computed: {
    ...mapGetters(["componentsList", "theme"]),
  },
  watch: {
    componentsList: {
      handler(val) {
        localStorage.setItem("componentsList", JSON.stringify(val));
      },
      deep: true,
    },
  },
  created() {
    const componentsList = localStorage.getItem("componentsList");
    if (componentsList && componentsList.length > 0) {
      this.updateComponentsList(JSON.parse(componentsList));
    }

    this.getTheme();
  },
  methods: {
    ...mapMutations({
      updateComponentsList: "UPDATE_COMPONENTS_LIST",
    }),
    ...themeMapMutations({
      getTheme: "GET_THEME",
    }),
  },
};
</script>
<style lang="scss">
.ghost::after {
  display: block;
  content: "";
  width: 100%;
  height: 30px !important;
  border-top: 3px solid rgb(11, 6, 250);
}
.ghost img {
  width: 15px;
}
* {
  box-sizing: border-box;
}
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
}
</style>
